<script setup>
import { onMounted, ref} from 'vue'
import {queryAllCourseCategory,deleteCourseCategory,queryCourseCategoryById,addCourseCategory,updateCourseCategory}  from "@/api/course_category"
import { ElMessage,ElMessageBox } from 'element-plus'

const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(true);
const total = ref(0);
const tableData = ref([])
const form = ref({categoryName:''})
onMounted(() => {
   search()
})
const search=async ()=>{
  const result = await queryAllCourseCategory(form.value.categoryName,currentPage.value,pageSize.value)
  console.log(result)
  if(result.code){
    tableData.value = result.data.rows;
    total.value = result.data.total 
  }else{
    ElMessage.error(result.msg) 
  }
}
const handleDelete=async (id)=>{
    ElMessageBox.confirm('您确认删除该课程分类信息吗?','提示',
    { confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}
  ).then(async () => {
    const result = await deleteCourseCategory(id)
    if(result.code){
      ElMessage.success("删除成功")
      search() 
    }else{
      ElMessage.error("删除失败") 
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
const selectedIds=ref([])
const handleSelectionChange=(selection)=>{
  selectedIds.value = selection.map(item=>item.id)
}
const deleteByIds=()=>{
    ElMessageBox.confirm('此操作将永久删除该课程分类信息, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    if(selectedIds.value&&selectedIds.value.length>0){
        const ids=selectedIds.value.join(',')
        const result = await deleteCourseCategory(ids)
        if(result.code){
           ElMessage.success("删除成功")
           search()
        }else{
            ElMessage.error("删除失败")
        } 
    }else{
        ElMessage.error("已取消删除")
    }
  })
}
const courseCategory=ref({categoryName:''})
const dialogVisible=ref(false)
const dialogTitle=ref('新增课程分类')
const FormRef=ref()
const handleSave=()=>{
   dialogVisible.value=true;
   dialogTitle.value='新增课程分类'
   courseCategory.value={
    categoryName:''
   }
   if(FormRef.value){
    FormRef.value.resetFields()
   }
}
const handleEdit=async(id)=>{
    const result=await queryCourseCategoryById(id)
    console.log(result.data)
    if(result.code){
      dialogVisible.value=true;
      dialogTitle.value='修改课程分类'
      courseCategory.value=result.data
    }
}
const save = async () => {
  if(!FormRef.value) return;
  let  result;
  if(courseCategory.value.id){
    result=await updateCourseCategory(courseCategory.value)
  }else{
    result=await addCourseCategory(courseCategory.value)
  }
  if(result.code){
      ElMessage.success('保存成功');
      dialogVisible.value = false;
      search();
    }else { //失败了
      ElMessage.error(result.msg);
      dialogVisible.value = true;
    }  
}
const clear=()=>{
    form.categoryName=''
    search()
}
const handleSizeChange = (val) => {
  search() 
}
const handleCurrentChange = (val) => {
  search() 
}
</script>
<template>
<h3>课程分类管理</h3>
    <div class="container">  
        <el-form :model="form" label-width="auto" style="max-width: 300px">
          <el-form-item label="课程分类名称">
          <el-input v-model="form.categoryName" clearable @clear="clear" placeholder="请输入课程分类名称" />
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="search">查询</el-button>
    </div>
    <el-button type="danger" @click="deleteByIds">批量删除</el-button>
    <el-button type="primary" @click="handleSave">新增分类</el-button>
    <el-table :data="tableData" stripe style="width: 100%"  @selection-change="handleSelectionChange">
        <el-table-column type="selection"  width="80" />
        <el-table-column label="id" property="id" width="160" />
        <el-table-column label="课程分类名称" property="categoryName" width="300" />
        <el-table-column  label="操作" width="180">
            <template #default="scope">
                <el-button type="info" size="mini" @click="handleEdit(scope.row.id)" >编辑</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)" >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination 
    v-model:current-page="currentPage" 
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40]" 
    :size="size" :disabled="disabled" 
    :background="background"
    layout="total, sizes, prev, pager, next, jumper" 
    :total="total" 
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form :model="courseCategory" ref="FormRef" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="课程类型" prop="categoryName">
            <el-input v-model="courseCategory.categoryName" placeholder="请输入课程类型名称"  style="width: 180px;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
      <!-- 底部按钮 -->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.container {
 display: flex;
 justify-content:flex-start;
 gap: 10px;
}
</style>